<template>
	<view>
		<text class="resetPwd">新用户注册</text>
		<view class="pwdBox">
			<image class="leftIcona" src="../../static/user2/photo.png"></image>
			<input class="inputPwd" type="text" placeholder="请输入手机号" v-model="userNamephone" />
		</view>
		<view class="pwdBox">
			<image class="leftIconb" src="../../static/user2/duanxin.png"></image>
			<input class="inputPwd" type="text" placeholder="请输入验证码" v-model="userPwdphone" />
			<view @click="obtainCode" class="obtain">
				<text class="obtainFont">{{codeBtn.codeText}}</text>
			</view>
		</view>
		<view class="pwdBox">
			<image class="leftIconc" src="../../static/user2/password.png"></image>
			<input class="inputPwd" type="password" placeholder="请输入6-16位数新密码" v-model="userPwd" />
		</view>
		<text @click="gologin" class="pwdLogin">密码登录</text>
		<view @click="registerButton" class="confirmSubmit">
			注册
		</view>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return {
				userNamephone: '',
				userPwdphone: '',
				userPwd: '',
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				rules: {
					userNamephone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					userPwdphone: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					},
					userPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						msg: "密码应该为6-16位"
					}
				}
			};
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						icon:'none',
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			registerButton() {
				if (!this.validate('userNamephone')) return;
				if (!this.validate("userPwdphone")) return;
				if (!this.validate("userPwd")) return;
				var self = this;
				Require.commonRequest({
					url: '/api/member/register',
					method: 'POST',
					data: {
						mobile: self.userNamephone,
						captcha: self.userPwdphone,
						password: self.userPwd,
					},
					success: function(ret) {
						if (ret.data.code == 200) {
							uni.showToast({
								title:'注册成功',
								duration:1000,
							})
							setTimeout(function(){
								uni.navigateTo({
								   url: './login',
							    })
							},1000)
							
							
						} else {
							uni.showToast({
								icon: 'none',
								title: ret.data.msg,
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			obtainCode() {
				var self = this;
				if (this.validate('userNamephone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false;
					var randomNum = ('000000' + Math.floor(Math.random() * 999999)).slice(-6);
                      
					Require.commonRequest({
						// needLogin: 1,
						url: '/api/sms/captcha',
						method: 'GET',
						data: {
							mobile: this.userNamephone,
							captcha: randomNum,
							type: 1,
						},
						success: (res) => {
							let timerId = setInterval(() => {
								let codetime = this.codeBtn.codeTime
								codetime--
								this.codeBtn.codeTime = codetime
								this.codeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									this.codeBtn.codeText = "重新获取"
									this.codeBtn.codeTime = 60
									this.codeBtn.codeStatus = true
								}
							}, 1000)
						}
					})
				}
			},
			gologin() {
				uni.navigateTo({
					url: './login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.resetPwd {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 150rpx;
		left: 49rpx;
	}
	.pwdBox {
		width: 650rpx;
		height: 70rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		top: 320rpx;
		left: 50rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
	}

	.leftIcona {
		width: 28rpx;
		height: 40rpx;
	}

	.leftIconb {
		width: 38rpx;
		height: 28rpx;
	}

	.leftIconc {
		width: 32rpx;
		height: 36rpx;
	}

	.inputPwd {
		width: 400rpx;
		height: 50rpx;
		font-size: 28rpx;
		position: absolute;
		left: 60rpx;
	}

	.obtain {
		width: 149rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		border-left: 1rpx solid #E5E5E5;
		position: absolute;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.obtainFont {
		position: relative;
		top: -2rpx;
		font-size: 28rpx;
	}

	.pwdLogin {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		top: 650rpx;
		left: 50rpx;
	}

	.confirmSubmit {
		width: 650rpx;
		height: 90rpx;
		background: rgba(115, 34, 216, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.3);
		border-radius: 20rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 800rpx;
		left: 50rpx;
	}
</style>
